import React, { useState } from 'react';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';

const { Divider } = StatisticCard;
const { Statistic } = StatisticCard;

const imgStyle = {
  display: 'block',
  width: 42,
  height: 42,
};

export default () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <StatisticCard.Group title="基本数据" direction={responsive ? 'column' : 'row'}>
        <StatisticCard
          statistic={{
            title: '课程名称',
            value: 'js课程设计',
            icon: (
              <img
                style={imgStyle}
                src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E5%9F%B9%E8%AE%AD%E8%AF%BE%E7%A8%8B.svg"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          statistic={{
            title: '任课教师',
            value: '韦应物',
            icon: (
              <img
                style={imgStyle}
                src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/teacher%EF%BC%8C%E8%80%81%E5%B8%88%EF%BC%8C%E6%95%99%E5%B8%88%EF%BC%8C%E7%94%B7%E4%BA%BA%EF%BC%8C%E4%BA%BA%E7%89%A9%EF%BC%8C%E5%A4%B4%E5%83%8F.svg"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          statistic={{
            title: '班级',
            value: '18计本五班',
            valueStyle: { fontSize: 15 },
            icon: (
              <img
                style={imgStyle}
                src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF_%E6%89%80%E5%9C%A8%E7%8F%AD%E7%BA%A7.svg"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          statistic={{
            title: '年级',
            value: '18级',
            icon: (
              <img
                style={imgStyle}
                src="https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/%E4%BB%BB%E5%8A%A1.svg"
                alt="icon"
              />
            ),
          }}
        />
      </StatisticCard.Group>

      <StatisticCard.Group direction={responsive ? 'column' : 'row'} style={{ marginTop: 10 }}>
        <StatisticCard
          statistic={{
            title: '作业提交量',
            value: 2021520,
          }}
          chart={
            <img
              src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
              alt="直方图"
              width="100%"
            />
          }
        />
        <Divider type={responsive ? 'horizontal' : 'vertical'} />
        <StatisticCard
          statistic={{
            title: '设计资源数',
            value: 234,
          }}
          chart={
            <img
              src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
              alt="直方图"
              width="100%"
            />
          }
        />
        <Divider type={responsive ? 'horizontal' : 'vertical'} />
        <StatisticCard
          statistic={{
            title: '信息完成度',
            value: 5,
            suffix: '/ 100',
          }}
          chart={
            <img
              src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
              alt="直方图"
              width="100%"
            />
          }
        />
      </StatisticCard.Group>

      <ProCard
        title="数据概览"
        extra="2019年9月28日 星期五"
        split={responsive ? 'horizontal' : 'vertical'}
        headerBordered
        bordered
      >
        <ProCard split="horizontal">
          <ProCard split="horizontal">
            <ProCard split="vertical">
              <StatisticCard
                statistic={{
                  title: '昨日全部流量',
                  value: 234,
                  description: <Statistic title="较本月平均流量" value="8.04%" trend="down" />,
                }}
              />
              <StatisticCard
                statistic={{
                  title: '本月累计流量',
                  value: 234,
                  description: <Statistic title="月同比" value="8.04%" trend="up" />,
                }}
              />
            </ProCard>
            <ProCard split="vertical">
              <StatisticCard
                statistic={{
                  title: '运行中实验',
                  value: '12/56',
                  suffix: '个',
                }}
              />
              <StatisticCard
                statistic={{
                  title: '历史实验总数',
                  value: '134',
                  suffix: '个',
                }}
              />
            </ProCard>
          </ProCard>
          <StatisticCard
            title="流量走势"
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/_dZIob2NB/zhuzhuangtu.svg"
                width="100%"
              />
            }
          />
        </ProCard>
        <StatisticCard
          title="流量占用情况"
          chart={
            <img
              src="https://gw.alipayobjects.com/zos/alicdn/qoYmFMxWY/jieping2021-03-29%252520xiawu4.32.34.png"
              alt="大盘"
              width="100%"
            />
          }
        />
      </ProCard>
    </RcResizeObserver>
  );
};
